<template>
  <plain-page>
    <div class="page-left">
      <el-card v-loading="loading" shadow="never" body-style="height: 72px; padding: 4px">
        <el-row style="margin-top: 8px; margin-left: 16px;">
          <el-col :span="6">
            <el-avatar :size="60" :src="agentAvatar" />
          </el-col>
          <el-col v-if="agent" :span="18" style="margin-top: 10px;">
            <el-row style="font-size: 14px;color:#606266;">
              <el-col>{{agent.displayName}}</el-col>
              <el-col style="margin-top: 8px">{{agent.callcenter.number}}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <workbench v-loading="loading" ref="workbench" style="margin-top: 2px; flex-grow: 1;" />
    </div>
    <el-card shadow="never" class="tabs-card">
      <el-tabs v-model="rightActiveTab">
        <el-tab-pane key="record" name="record" label="通话记录">
          <record ref="record" />
        </el-tab-pane>
        <el-tab-pane v-if="callComingPaneShow" key="callcoming" name="callcoming" label="最近来电">
          <call-coming-pane
            ref="callComingPane"
            @close="callComingPaneShow = false, rightActiveTab = 'record'"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </plain-page>
</template>

<script>
import agentAvatar from '@/assets/default-avatar.png';
import Workbench from './Workbench';
import CallComingPane from './CallComingPane';
import Record from '../Record';

export default {
  pageProps: {
    title: '客服工作台'
  },
  components: {
    Workbench,
    Record,
    CallComingPane
  },
  data() {
    this.agentAvatar = agentAvatar;

    return {
      rightActiveTab: 'record',
      callComingPaneShow: false,
      loading: false,
      agent: null
    };
  },
  watch: {
    rightActiveTab(tabKey) {
      if (tabKey == 'record' && this.needUpdateRecord) {
        this.$refs.record.query();
        this.needUpdateRecord = false;
      }
    }
  },
  async mounted() {
    this.loading = true;
    this.agent = await this.$http.get('/api/callcenter/agentConfig/getCurrentAgent');
    let { workbench } = this.$refs;
    workbench.$once('loadSuccess', () => {
      this.loading = false;
    });
    workbench.load(this.agent.callcenter);
    workbench.$on('callComing', (connid, callerNumber, calleeNumber, contacId) => {
      this.callComingPaneShow = true;
      this.rightActiveTab = 'callcoming';
      this.$nextTick(() => {
        this.$refs.callComingPane.loadByNumber(callerNumber);
        this.pushPage('/callcenter/workbench');
      });
    });

    workbench.$on('callRelease', () => {
      this.needUpdateRecord = true;
    });
    workbench.$on('hangUp', () => {
      this.needUpdateRecord = true;
    });
  }
}
</script>

<style scoped>
.plain-page {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.page-left {
  display: flex;
  flex-direction: column;
  width: 330px;
}

.tabs-card {
  margin-left: 4px;
  flex-grow: 1;
}

.tabs-card >>> .el-card__body {
  padding: 0px 10px;
}
</style>